<template>
  <div class="sure">
    <van-nav-bar title="确认订单" left-arrow @click-left="goSendRedPacket" class="text_2353X1" />
    <div class="box_754X1">
      <p class="up" v-for="(item, index) in realArr " :key="index">
        <span class="text_762X1">{{item.coupon_name}}元优惠券vip全国通用</span>
        <span>
          <span class="text_763X1">x{{ item.value }}</span>
          <span class="text_764X1">￥{{ item.money }}</span>
        </span>
      </p>
      <p class="bottom">
        <span>共{{ BuyNumber.totalValue }}张</span>
        <span>
          <span>小计</span>
          <span class="text_768X1">￥{{BuyNumber.money}}</span>
        </span>
      </p>
    </div>
    <p class="text_769X1">
      <span>支付方式</span>
      <span class="wechat">微信支付></span>
    </p>
    <div class="wrapper_497X1">
      <input type="checkbox" v-model="checked" @click="isChecked"><span>我已阅读并同意 </span><span
        class="text_772X1">《支付协议》</span>
      <p class="tips">温馨提示：仅支持开具电子发票，订单完成后可前往发票管理中开具</p>
    </div>
    <div class="footer">
      <span>￥{{ BuyNumber.money }}</span>
      <div class="counter" @click="goToPay">去结算</div>
    </div>
  </div>
</template>

<script setup>
import { ref,onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import { useBuyNumber } from '@/store/discountCoupon.js'
const BuyNumber = useBuyNumber()
const props = defineProps(['arr'])
const router = useRouter()
const realArr = ref([])
const findRealArr = ()=>{
    BuyNumber.arr.forEach(item => {
        if(item.value != 0){
            realArr.value.push(item)
            console.log(realArr.value)
        }
    });
}
// const coupon = ref([
//   {
//     name: 'B1全国通用',
//     num: 1,
//     price: 21
//   },
//   {
//     name: 'B1全国通用',
//     num: 1,
//     price: 21
//   },

// ])
// // 优惠券名字
// const couponName = ref(['B1全国通用'])
// // 优惠券数量
// const couponNum = ref(1)
// // 优惠券金额
// const price = ref(21)
// 优惠券总数量
// const totalCouponNum = ref(1)
let newNum = ref(0)
// const totalCouponNum = () => {
//  coupon.value.forEach(item => newNum.value += item.num )
//   console.log(newNum.value)
// }
const goSendRedPacket = ()=>{
    BuyNumber.money = 0
    router.back()
}
onMounted(() => {
//   totalCouponNum()
    findRealArr()
})

// 总计
const totalPrice = () => {
}

const checked = ref(false)
const isChecked = () => checked.value = !checked.value




const goToPay = () => {
  // 判断是否勾选同意支付协议
  if (!checked.value) return showToast('请先阅读并同意《支付协议》')

  router.push({ name: 'pay', query: { url: 'confirmorder_1' } })
}

</script>

<style lang="scss" scoped>
.sure {
  background-color: #f8f8f8;
  height: 100vh;

  .text_2353X1 {
    width: 375px;
    height: 44px;
    padding-top: 20px;
    color: rgba(56, 56, 56, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 18px;
    line-height: 150%;
    text-align: center;
    font-weight: bold;
  }

  .box_754X1 {
    width: 375px;
    color: rgba(80, 80, 80, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 14px;
    line-height: 150%;
    margin-bottom: 10px;

    .up,
    .bottom {
      display: flex;
      justify-content: space-between;
      height: 49px;
      align-items: center;
      padding: 0 15px;

      .text_762X1,
      .text_764X1 {
        font-weight: bold;
        font-size: 14px;
      }

      .text_763X1 {
        color: rgba(56, 56, 56, 1);
        font-size: 12px;
        margin-right: 15px;
      }

      .text_768X1 {
        font-weight: bold;
        font-size: 18px;
        margin-left: 5px;

      }
    }

  }

  .text_769X1 {
    width: 375px;
    height: 44px;
    color: rgba(56, 56, 56, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 14px;
    line-height: 150%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;

    .wechat {
      color: rgba(80, 80, 80, 1);
    }

  }

  .wrapper_497X1 {
    width: 330px;
    height: 42px;
    left: 15px;
    top: 248px;
    font-size: 11px;
    padding-left: 15px;
    color: rgba(128, 128, 128, 1);
    margin-top: 15px;

    .text_772X1 {
      color: rgba(85, 122, 157, 1);
      font-size: 11px;
    }

    .tips {
      margin-top: 5px;
    }
  }

  .footer {
    width: 375px;
    height: 60px;
    color: rgba(56, 56, 56, 1);
    background-color: rgba(255, 255, 255, 1);
    font-size: 18px;
    line-height: 150%;
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 15px;
    box-sizing: border-box;

    .counter {
      width: 119px;
      height: 60px;
      // left: 256px;
      // top: 607px;
      color: rgba(255, 255, 255, 1);
      background-color: rgba(144, 192, 239, 1);
      font-size: 16px;
      line-height: 60px;
      text-align: center;
      font-weight: bold;
    }

  }


}
</style>